
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片自动切换-只准用两个img标签</title>
	<style>
		html, body, img, ul { margin: 0; padding: 0; }
		img { border: 0; width: 600px; height: 400px; }
		li { list-style: none; }
		#wrap { font-size: 0; width: 600px; height: 400px; position: absolute; top: 0; left: 0; }
		#showbox { width: 600px; height: 400px; border: 5px solid #eee; margin: 50px auto; overflow: hidden; position: relative; }		
		#prev, #next { display: block; width: 40px; height: 40px; background: #000; opacity: 0.5; border-radius: 40px; color: #fff; text-align: center; line-height: 40px; font-weight: bold; font-size: 30px; position: absolute; top: 200px; margin-top: -20px; cursor: pointer; }
		#prev { left: 10px; }
		#next { right: 10px; }
		#bullets li { display: inline-block; width: 20px; height: 20px; background: #fff; border-radius: 20px; opacity: 0.6; cursor: pointer; }
		#bullets { text-align: center; position: absolute; bottom: 5px; width: 600px; }
	</style>
	<script>

		function getStyle(obj, attr){
			return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
		}

		function move(obj, attr, distance, step, frequency, endFn) {
			if(!obj.moved) return;
			var startVal = parseInt(getStyle(obj, attr));
			var times = 0;
			obj.moved = false;
			step = distance > 0 ? step : -step;
			clearInterval(obj.move);
			obj.move = setInterval(function(){
				obj.style[attr] = parseInt(getStyle(obj, attr)) + step + 'px';
				times ++;
				if(Math.abs(step * times) > Math.abs(distance)) {
					clearInterval(obj.move);
					obj.style[attr] = startVal + distance + 'px';
					obj.moved = true;
					endFn && endFn();
				}

			}, frequency)
		}

		window.onload = function(){
			var oShowbox = document.getElementById('showbox'),
				oWrap = document.getElementById('wrap'),
				oPrev = document.getElementById('prev'),
				oNext = document.getElementById('next'),
				oBullets = document.getElementById('bullets'),
				aLi = oBullets.getElementsByTagName('li'),
				aImg = oWrap.getElementsByTagName('img'),
				arrImg = ['9-img/1.jpg', '9-img/2.jpg', '9-img/3.jpg', '9-img/4.jpg', '9-img/5.jpg'],
				timer = null,
				num = 0;
				oWrap.moved = true;

			aImg[0].src = arrImg[0];
			aImg[1].src = arrImg[1];
			aLi[0].style.background = "#000";

			oPrev.onmouseover = function(){
				this.style.transform = 'scale(1.5)';
				this.style.background = '#fff';
				this.style.color = '#000';
			}
			oPrev.onmouseout = function(){
				this.style.transform = 'scale(1)';
				this.style.background = '#000';
				this.style.color = '#fff';
			}
			oNext.onmouseover = function(){
				this.style.transform = 'scale(1.5)';
				this.style.background = '#fff';
				this.style.color = '#000';
			}
			oNext.onmouseout = function(){
				this.style.transform = 'scale(1)';
				this.style.background = '#000';
				this.style.color = '#fff';
			}

			oNext.onclick = function(){
				if(!oWrap.moved){
					return;
				}
				aImg[1].style.position = 'absolute';
				aImg[1].style.top = '0';
				aImg[1].style.left = '600px';

				num++;
				if(num == arrImg.length){
					num = 0;
				}
				aImg[1].src = arrImg[num];
				move(oWrap, 'left', -600, 20, 20, function(){
					aImg[0].src = aImg[1].src;
					oWrap.style.left = '0';
					clearBullets();
					aLi[num].style.background = '#000';
				});
			}

			oPrev.onclick = function(){
				if(!oWrap.moved){
					return;
				}
				aImg[1].style.position = 'absolute';
				aImg[1].style.top = '0';
				aImg[1].style.left = '-600px';

				num--;
				if(num < 0) {
					num = arrImg.length - 1;
				}
				aImg[1].src = arrImg[num];
				move(oWrap, 'left', 600, 20, 20, function(){
					aImg[0].src = aImg[1].src;
					oWrap.style.left = '0';
					clearBullets();
					aLi[num].style.background = '#000';
				})
			}

			function clearBullets(){
				for(var i=0; i<aLi.length; i++){
					aLi[i].style.background = '#fff';
				}
			}

			for(var i=0; i<aLi.length; i++){
				aLi[i].index = i;
				aLi[i].onclick = function(){
					var _index = this.index;
					if (num == this.index) {
						return;
					}
					if(num < this.index) {
						aImg[1].style.position = 'absolute';
						aImg[1].style.top = '0';
						aImg[1].style.left = '600px';

						aImg[1].src = arrImg[this.index];
						move(oWrap, 'left', -600, 20, 20, function(){
							aImg[0].src = aImg[1].src;
							num = _index;
							oWrap.style.left = '0';
							clearBullets();
							aLi[num].style.background = '#000';
						});

					}

					if(num > this.index) {
						aImg[1].style.position = 'absolute';
						aImg[1].style.top = '0';
						aImg[1].style.left = '-600px';

						aImg[1].src = arrImg[this.index];
						move(oWrap, 'left', 600, 20, 20, function(){
							aImg[0].src = aImg[1].src;
							num = _index;
							oWrap.style.left = '0';
							clearBullets();
							aLi[num].style.background = '#000';
						});

					}

				}
			}


		}
	</script>
</head>
<body>
	<div id="showbox">
		<div id="wrap">
			<img src = "" />
			<img src = "" />
		</div>
		
		<span id="prev">&lt;</span>
		<span id="next">&gt;</span>

		<ul id="bullets">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		
	</div>
</body>
</html>